<template>
	<div class="login-wrap">
		<div class="ms-login">
			<el-row :gutter="20">
				<el-col :span="24">
					<div class="login-left">
						<div class="title">{{title}}</div>
						<!-- <img src="../assets/img/logo.jpg" /> -->
						<div class="login">
							<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
								<el-form-item prop="user_name" class="input-wrap">
									<el-input v-model="param.user_name" placeholder="请输入账号">
										<el-button slot="prepend" class="el-icon-lx-people"></el-button>
									</el-input>
								</el-form-item>
								<el-form-item prop="password" class="input-wrap">
									<el-input type="password" placeholder="password" v-model="param.password"
										@keyup.enter.native="submitForm()">
										<el-button slot="prepend" icon="el-icon-lx-lock" font-size="30"></el-button>
									</el-input>
								</el-form-item>
								<div class="login-btn">
									<el-button type="primary" @click="submitForm()">登录</el-button>
								</div>
							</el-form>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import {
		login
	} from '../api/index';
	import { title } from '../api/request'
	export default {
		data: function() {
			return {
				param: {
					user_name: '',
					password: '',
				},
				rules: {
					user_name: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
				},
				title
			};
		},
		created() {
			localStorage.clear();
		},
		methods: {
			submitForm() {
				// let sxx_menu=[{"index":"payment","title":"付款管理","icon":"el-icon-printer","count":0,
				// "children":[{"index":"payment","title":"付款申请","icon":"","count":0},
				// 			{"index":"list_payment","title":"付款列表","icon":"","count":0}]},
				// 			{"index":"configure","title":"权限配置","icon":"el-icon-s-tools","count":0}]
									
				// localStorage.setItem('menuList', JSON.stringify(sxx_menu));
				// this.$router.push('/payment');
				this.$refs.login.validate(valid => {
					if (valid) {
						login(this.param).then(res => {
							res.data.menu_list.forEach(item=>{
								if(item.subs){
									item.index=item.subs[0].index
								}
							})
							localStorage.setItem('menuList', JSON.stringify(res.data.menu_list));
							localStorage.setItem('userInfo', JSON.stringify(res.data.user_info));
							localStorage.setItem('user-token', res.data.token);
							// // this.$message.success('登录成功');
							this.$router.push('/'+res.data.menu_list[0].index);
						});
					} else {
						this.$message.error('请输入账号和密码');
						return false;
					}
				})
			}
		},
	};
</script>

<style scoped lang="less">
	.title{
		font-size:30px!important;
		margin-top: 20px;
	}
	.login-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		background: url(../assets/img/login_background.png);
		background-size: 100% 100%;

		.ms-login {
			position: absolute;
			left: 50%;
			top: 50%;
			width: 600px;
			margin: -260px 0 0 -320px;
			border-radius: 5px;
			background: #fff;
			overflow: hidden;
			padding: 20px;
			display: flex;
			justify-content: center;

			.login-left {
				width: 500px;
				margin: 0 26px;
				text-align: center;
			}

			.login {
				width: 380px;
				margin-left: 60px;

				.ms-title {
					width: 100%;
					font-size: 26px;
					font-weight: 600;
					color: #403d3d;
					display: flex;
					align-items: center;
					justify-content: center;

					img {
						margin-right: 10px;
					}
				}

				.ms-content {
					padding: 20px 0;
				}

				.input-wrap {
					text-align: center;
					/deep/.el-input__inner{
						height: 50px;
					}
					button {
						font-size: 20px;
					}
				}

				.login-btn {
					button {
						width: 100%;
						height: 50px;
						margin-top: 20px;
						font-size: 16px;
						margin-bottom: 10px;
					}
				}
			}
		}
	}

	/deep/.el-form-item__content {
		margin-top: 20px;
	}

	/deep/.el-input--small .el-input__inner {
		height: 50px;
		font-size: 16px;
	}
</style>
